<template>
    <div>
        <h2>添加图书</h2>
        <p>图书名称：<input type="text" v-model="name"></p>
        <p>图书价格：<input type="text" v-model="price"></p>
        <p>图书封面：<input type="file" @change="get_file($event)"></p>
        <p>图书作者：<select v-model="cate">
            <option v-for="(i,d) in cates" :value="i.id" :key="d">{{i.name}}</option>
        </select>
        </p>
        <button @click="addbook()">添加</button>
    </div>    
</template>

<script>
import axios from "axios"
import {get_author} from "../axios_api/api.js"
export default {
    name:"addbook",
    data() {
        return {
            name:"",
            price:"",
            cate:"",
            cates:""
        }
    },
    methods:{
        get_file(event){
            this.file = event.target.files[0]
        },
        get_author(){
            get_author().then(res=>{
                console.log(res)
                this.cates = res.data
            })
        },
        addbook(){
            let formdata = new FormData()
            formdata.append("name",this.name)
            formdata.append("price",this.price)
            formdata.append("img",this.file)
            formdata.append("cate",this.cate)
            axios({
                url:"http://127.0.0.1:8000/week4/book/",
                method:"post",
                data:formdata
            }).then(res=>{
                console.log(res.data)
            })
        }



    },
    created(){
        this.get_author()
    }
}
</script>

<style>

</style>
